<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="icon" href="./ico.svg" />
  <meta name="author" content="小浪" />
  <meta name="keywords" content="it浪子,文章目录生成,TOC,侧边栏目录的滚动效果" />
  <meta name="description" content="为文章动态生成侧边栏目录以及静态侧边栏目录的滚动效果" />
  <meta name="robots" content="all" />
  <meta name="renderer" content="webkit" />
  <title>TOC 文章目录生成</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.1.0/github-markdown.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-okaidia.min.css">

  <style>
    html {
      font-size: 16px;
    }

    body {
      height: 100vh;
    }

    @media (min-width: 576px) {
      .container {
        max-width: 540px;
      }
    }

    @media (min-width: 768px) {
      .container {
        max-width: 720px;
      }
    }

    @media (min-width: 992px) {
      .container {
        max-width: 960px;
      }
    }

    @media (min-width: 1200px) {
      .container {
        max-width: 1140px;
      }
    }

    .container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
      position: relative;
    }

    .col-sm-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%;
    }

    .col-sm-9 {
      flex: 0 0 75%;
      max-width: 75%;
      padding-left: 15px;
      padding-right: 15px;
    }

    .col-sm-12 {
      flex: 0 0 100%;
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
    }

    .col-sm-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }

    .col-sm-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
    }

    .col-sm-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    header {
      background: #cf1322;
      color: #fff;
      font-size: 1.25rem;
      padding: 0.5rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 10;
    }

    header .nav {
      display: flex;
      align-items: center;
    }

    .logo>img {
      height: 60px;
    }

    .github {
      margin-left: auto !important;
    }

    code.code {
      color: #333;
      background: #eee;
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 12px;
    }

    pre {
      background: #ccc;
      border-radius: 4px;
      color: #333;
      padding: 5px 10px;
      margin: 5px 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      margin-bottom: 10px;
    }

    p {
      margin: 15px 0;
    }

    p.api {
      font-weight: bold;
    }

    strong {
      font-size: 15px;
    }

    small {
      color: #555;
      padding-left: 10px;
    }

    .actions {
      position: fixed;
      top: 93px;
      right: 20px;
      z-index: 5;
    }

    .actions button {
      background: #cf1322;
      color: #fff;
      border: 0;
      padding: 10px 15px;
      cursor: pointer;
    }

    footer {
      background: #cf1322;
      color: #ddd;
      padding: 20px 0;
      font-size: 13px;
    }

    footer p {
      margin: 0;
    }

    footer a {
      color: #fff;
      text-decoration: none;
    }

    footer a:hover {
      color: #ccc;
    }

    footer .container {
      text-align: center;
    }

    .blockquote-footer {
      display: block;
      font-size: 80%;
      color: #eee;
    }

    .scroll {
      position: relative;
      max-height: 500px;
      overflow: auto;
    }

    .bitoc {
      /* max-height: calc(100vh - 500px); */
      max-height: 20rem;
    }

    .bitoc-fixed {
      position: fixed !important;
      top: 86px;
      max-width: 285px;
    }

    #scroll-content.max-height {
      max-height: 500px;
      overflow-y: auto;
    }

    #main-container {
      margin-top: 83px;
      min-height: calc(100vh - 422px);
    }
  </style>
</head>

<body>
  <header>
    <div class="container">
      <div class="nav">
        <div class="logo">

        </div>
        <div class="github">
          <a href="https://github.com/itlangzi" target="_blank">
            <img src="./github.svg" />
          </a>
        </div>
      </div>
    </div>
  </header>

  <div class="container" id="main-container">
    <div class="actions" style="text-align: right">
      <button id="toggerBtn">显示/隐藏目录</button>
    </div>
    <div style="height: 20rem; line-height: 20rem; width: 100%; text-align: center;">
      <img src="./logo.svg" />
    </div>
    <div class="row">
      <div class="col-sm-9 normal" id="scroll">
        <div id="scroll-content">
          <div id="toc-helper-content" class="content">
            <!-- content -->


          </div>
        </div>
      </div>

      <div class="col-sm-3" id="toc-container">
        <div id="toc-wrap">
          <div>目录</div>
          <div class="toc" id="toc"></div>
        </div>
      </div>
    </div>
  </div>
  <footer>
    <div class="container">
      <blockquote class="blockquote">
        <p class="mb-0">
          版权所有 Copyright © 2019-2022 Design By
          <a href="http://www.itlangzi.com" target="_blank"><cite title="it浪子技术博客"> it浪子技术博客 </cite></a>
        </p>
      </blockquote>
    </div>
  </footer>
  <script type="module" src="./index.js"></script>

</body>

</html>